@charset "utf-8";

.demo_container {
    font-size: 14px;
}

.demo_section {
    .demo_content,
    .demo_module {
        width: 1000px;
        margin: 20px auto;
    }

    .demo_module {
        font-size: 24px;
        color: #ffffff;
        background-color: #4A5FBE;
        padding: 10px;
        border-radius: 5px;
    }
}

.demo_content {
    display: -webkit-flex;
    display: flex;

    .demo_code,
    .demo_show {
        max-height: 500px;
        overflow: auto;
        border: 1px solid #ececec;
        padding: 20px;
        border-radius: 5px;

        .demo_title {
            font-size: 20px;
            margin: 14px 0;
            &:first-child {
                margin-top: 0;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .demo_code {
        width: 69%;
        margin-right: 20px;

        pre {
            padding: 20px;
            background-color: #efefef;
            white-space: pre-wrap;
            word-break: break-all;
            &:first-child {
                margin-top: 0;
            }
            &:last-child {
                margin-bottom: 0;
            }

            .demo_note {
                color: #cccccc;
            }
        }
    }

    .demo_show {
        width: 31%;

        .demo_iframe {
            position: relative;
            height: 415px;
            border: 1px solid #ececec;
        }
        
        .demo_iframe.demo_layer {
            overflow: hidden;
            
            .layer {
                position: absolute;
            }
        }
    }

}
